<template>
    <div class="page">
        <div class="topData">
            <img class="topIcon" src="@/assets/partner/topDataIcon.png" />
            <div class="teamNum">
                团队合伙人数(人)
                <span style="margin-left: 5px">{{ teamNUm }}</span>
            </div>
            <div class="otherData">
                <div class="item">
                    <div class="direct">直属合伙人数 {{ 1 }}</div>
                    <div class="monthadd">（本月新增人数 {{ 1 }}）</div>
                </div>
                <div class="item">
                    <div class="direct">下级团队合伙人数 {{ 1 }}</div>
                    <div class="monthadd">（本月新增人数 {{ 1 }}）</div>
                </div>
            </div>
            <img class="bottomIcon" src="@/assets/partner/bottomIcon.png" />
        </div>
        <!-- 搜索 -->
        <div class="searchModel">
            <img src="@/assets/partner/searchIcon.png" />
            <div class="searchIpt">
                <van-field v-model="userPhone" placeholder="请输入合伙人姓名或手机号" />
            </div>
            <div class="searchBtn">搜索</div>
        </div>
        <div class="allNUm">
            <div class="ifReal">
                <div @click="fliterReal(true)" class="haveReal" :class="realActivity == true ? 'activity' : ''">已实名</div>
                <div @click="fliterReal(false)" class="noReal" :class="realActivity == false ? 'activity' : ''">未实名</div>
            </div>
            <div>共{{ 0 }}户</div>
        </div>
        <!-- 筛选 -->
        <div class="fliterModel">
            <div class="onFilter">
                <div class="filterItem">
                    排序
                    <img src="@/assets/partner/sortIcon.png" />
                </div>
                <div class="filterItem" style="margin-left: 16px" @click="showPopup">
                    筛选
                    <img src="@/assets/partner/filterIcon.png" />
                </div>
            </div>
        </div>
        <!-- 列表 -->
        <div style="margin-top: 14px">
            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <div class="card" v-for="item in 10" :key="item" @click="catDetail">
                    <img class="head" src="@/assets/merchant/head.png" alt="" />
                    <div class="card-content">
                        <div class="name">
                            <text>测试一级刘阳</text>
                            <div class="posType">电签</div>
                        </div>
                        <div class="cycle">电签成长期0.60%+0</div>
                        <div class="Trading">
                            <div class="left">
                                <div class="value">51232121.08</div>
                                <div class="label">本月总交易额</div>
                            </div>
                            <div class="right">
                                <div class="value">51232121.08</div>
                                <div class="label">累计交易额</div>
                            </div>
                        </div>
                    </div>
                </div>
            </van-list>
        </div>
        <van-popup v-model:show="showRight" position="right" :style="{ width: '50%', height: '100%' }">
            <div class="popupContent">
                <div class="title">筛选</div>
                <div>
                    <div style="margin-bottom: 5px">筛选方式</div>
                    <div @click="onselect(0)" :class="actFilter == 0 ? 'activity' : ''" class="filterItem">全部</div>
                    <div @click="onselect(1)" :class="actFilter == 1 ? 'activity' : ''" class="filterItem">超15天无新增商户的合伙人</div>
                    <div @click="onselect(2)" :class="actFilter == 2 ? 'activity' : ''" class="filterItem">超30天无新增商户的合伙人</div>
                    <div @click="onselect(3)" :class="actFilter == 3 ? 'activity' : ''" class="filterItem">超15天团队无新增商户的合伙人</div>
                    <div @click="onselect(4)" :class="actFilter == 4 ? 'activity' : ''" class="filterItem">超30天团队无新增商户的合伙人</div>
                    <div @click="onselect(5)" :class="actFilter == 5 ? 'activity' : ''" class="filterItem">超30天团队无新增合伙人的合伙人</div>
                </div>
                <div style="margin-top: 20px" @click="selDate">
                    <div style="margin-bottom: 10px">注册日期</div>
                    <div class="dateBox">
                        <div class="currentTime">{{ startTime }}</div>
                        <div style="margin: 10px auto">至</div>
                        <div class="currentTime">{{ endTime }}</div>
                    </div>
                </div>
                <div class="footer">
                    <div class="reset" @click="onreset">重置</div>
                    <div class="sure" @click="onsure">确定</div>
                </div>
            </div>
        </van-popup>
        <!-- 选择日期 -->
        <van-calendar :allow-same-day="true" v-model:show="showCalendar" type="range" @confirm="onConfirm" />
    </div>
</template>

<script setup lang="ts">
import { formatDate } from '@/utils/filter.js'
const teamNUm = ref(1)
const realActivity = ref(0)
const userPhone = ref('')
const fliterReal = val => {
    realActivity.value = val
}
const list = ref([])
const loading = ref(false)
const finished = ref(false)
const onLoad = () => {
    // 异步更新数据
    // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    setTimeout(() => {
        for (let i = 0; i < 10; i++) {
            list.value.push(list.value.length + 1)
        }

        // 加载状态结束
        loading.value = false

        // 数据全部加载完成
        if (list.value.length >= 40) {
            finished.value = true
        }
    }, 1000)
}
const showRight = ref(false)
const showPopup = () => {
    showRight.value = true
}
const actFilter = ref(0)
const onselect = val => {
    actFilter.value = val
}
// 日历
const startTime = ref(formatDate(new Date(), 'yyyy-m-d'))
const endTime = ref(formatDate(new Date(), 'yyyy-m-d'))
// formatDate(+new Date(),'yyyy-mm-dd')
const showCalendar = ref(false)
const selDate = () => {
    showCalendar.value = true
}
const onConfirm = values => {
    const [start, end] = values
    startTime.value = formatDate(start, 'yyyy-m-d')
    endTime.value = formatDate(end, 'yyyy-m-d')
    showCalendar.value = false
}
// 筛选完成
const onreset = () => {
    showRight.value = false
}
const onsure = () => {
    showRight.value = false
}
</script>
<style scoped lang="scss">
.page {
    padding: 19px 15px;
    .topData {
        position: relative;
        padding: 13px 8px;
        background: url('@/assets/partner/topDataBg.png') no-repeat top left / 100% 100%;
        .topIcon {
            position: absolute;
            top: -14px;
            right: 40px;
            width: 60px;
            height: 60px;
        }
        .bottomIcon {
            position: absolute;
            bottom: 13px;
            right: 8px;
            width: 88px;
            height: 54px;
        }
        .teamNum {
            font-size: 20px;
            font-family: DingTalk JinBuTi;
            font-weight: 400;
            color: #ffffff;
            opacity: 1;
        }
        .otherData {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 19px 15px;
            background: #e7efff;
            margin-top: 15px;
            font-size: 18px;
            font-family: DingTalk JinBuTi;
            font-weight: 400;
            color: #66d6ff;

            .item {
                text-align: center;
                .monthadd {
                    margin-top: 11px;
                }
            }
        }
    }
    .searchModel {
        display: flex;
        align-items: center;
        padding-left: 10px;
        margin-top: 10px;
        background: #ffffff;
        border-radius: 30px;
        ::v-deep .van-field {
            line-height: 100%;
            padding: 0 !important;
        }
        .searchIpt {
            flex: 1;
            height: 40px;
            display: flex;
            align-items: center;
            margin-left: 10px;
        }
        img {
            width: 16px;
            height: 16px;
        }
        .searchBtn {
            // line-height: 20px;
            padding: 8px 14px;
            background: #66d6ff;
            opacity: 1;
            border-radius: 13px;
            color: #ffffff;
        }
    }
    .allNUm {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 20px 0;
        .ifReal {
            display: flex;
            align-items: center;
            color: #66d6ff;
            .haveReal {
                padding: 7px 10px;
                border-radius: 10px 0px 0px 10px;
                background: #ffffff;
            }
            .noReal {
                padding: 7px 10px;
                border-radius: 0px 10px 10px 0px;
                background: #ffffff;
            }
            .activity {
                background: #66d6ff !important;
                color: #ffffff !important;
            }
        }
    }
    .fliterModel {
        display: flex;
        justify-content: flex-end;
        .onFilter {
            display: flex;
            .filterItem {
                display: flex;
                align-items: center;
            }
            img {
                width: 14px;
                height: 14px;
                margin-left: 5px;
            }
        }
    }
    .card {
        background: #ffffff;
        border-radius: 8px;
        display: flex;
        padding: 10px;
        margin-bottom: 10px;
        .head {
            width: 36px;
            height: 36px;
        }
        .card-content {
            padding: 0 10px;
            flex: 1;
            .name {
                display: flex;
                align-items: center;
                text {
                    font-size: 14px;
                    font-family: SimHei;
                    font-weight: 400;
                    color: #000000;
                }
                .posType {
                    background: #d1dfff;
                    border-radius: 4px;
                    padding: 3px;
                    margin-left: 10px;
                    font-size: 12px;
                    font-family: SimHei;
                    font-weight: 400;
                    color: #66d6ff;
                }
            }
            .cycle {
                font-size: 12px;
                font-family: SimHei;
                padding: 5px 0;
                font-weight: 400;
                color: #b1b1b1;
            }
            .Trading {
                display: flex;
                line-height: 20px;
                margin-top: 5px;
                .left,
                .right {
                    width: 50%;
                }
                .value {
                    font-size: 16px;
                    font-family: DingTalk JinBuTi;
                    font-weight: 400;
                    color: #66d6ff;
                }
                .label {
                    font-size: 12px;
                    font-family: SimHei;
                    font-weight: 400;
                    color: #8f8f8f;
                }
            }
        }
    }
    .popupContent {
        padding: 45px 10px 19px;
        .title {
            text-align: center;
            font-size: 18px;
            font-family: SimHei;
            font-weight: 400;
            color: #000000;
            margin-bottom: 21px;
        }
        .filterItem {
            display: inline-block;
            padding: 7px;
            background: #f1f1f1;
            margin-top: 9px;
            border-radius: 4px;
        }
        .activity {
            background: #66d6ff;
            color: #fff;
        }
        .dateBox {
            display: flex;
            flex-direction: column;
            align-items: center;
            .currentTime {
                padding: 7px 25px;
                background: #f1f1f1;
                color: #66d6ff;
            }
        }
        .footer {
            display: flex;
            justify-content: space-around;
            width: 100%;
            position: absolute;
            bottom: 10px;
            .reset {
                padding: 8px 30px;
                background: #f1f1f1;
            }
            .sure {
                padding: 8px 30px;
                background: #66d6ff;
                color: #fff;
            }
        }
    }
}
</style>
